<template>
	<view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<u-navbar :title="$t('recruit.postAJob')" :autoBack="true" bgColor="#F6F6F6"
			titleStyle="font-weight: 500; color: #000000;" :placeholder="true">
		</u-navbar>
		<view class="released-view">
			<view class="write-view">
				<view class="write-detail">
					<view class="title">{{ $t("feeServices.category") }}</view>
					<view class="" @click="chooseHandle('category')">
						<text class="write-placeholder" v-if="!submitForm.labelId">
							{{ $t('feeServices.PleaseChoose') }}
						</text>
						<text class="write-text" v-else>
							{{ getCategoryName(submitForm.labelId) }}
						</text>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>
				<view class="write-detail">
					<view class="title">{{ $t("recruit.Position") }}</view>
					<input class="right-input" placeholder-class="write-placeholder" v-model="submitForm.position"
						:placeholder="$t('feeServices.PleaseEnter')" />
				</view>
			</view>

			<view class="Paid-view">
				<view class="title" style="margin-bottom: 30upx">{{ $t("recruit.Requirements") }}</view>
				<u-textarea height="400rpx" v-model="submitForm.requirements" count maxlength="800"
					:placeholder="$t('recruit.RequirementsTip')" style="
			      border-radius: 20upx;
			      border: none;
			      padding: 0;
			    "></u-textarea>
			</view>

			<view class="write-view">
				<view class="write-detail">
					<view class="title">{{ $t("recruit.Workplace") }}</view>
					<view class="flex-box">
						<regionSelect ref="regionSelectWorkplace" :cityValue.sync="workPlace"
							@countryIosCode="getCurrentPostCity" @totalValue="getToatlWorkplace"
							:isEditor="!!submitForm.id">
						</regionSelect>
						<!-- 		<text class="write-placeholder ">
							{{$t('feeServices.PleaseChoose')}}
						</text> -->
						<view style="width: 24rpx;">

						</view>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>

				<view class="write-detail-input">
					<view class="title">{{ $t("recruit.DetailedAddress") }}</view>
					<view class="h30"></view>
					<input placeholder-class="write-placeholder-input" v-model="submitForm.detailedAddress"
						:placeholder="$t('recruit.PleaseEnter')" />
				</view>

				<view class="write-detail">
					<view class="title">{{ $t("recruit.JobNature") }}</view>
					<view class="" @click="chooseHandle('jobNature')">
						<text class="write-placeholder" v-if="submitForm.jobNature === ''">
							{{ $t('recruit.PleaseChoose') }}
						</text>
						<text class="write-text" v-else>
							{{ submitForm.jobNature == 0 ? $t('recruit.Fulltime') : $t('recruit.Part-time') }}
						</text>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>

				<view class="write-detail">
					<view class="title">{{ $t("recruit.WorkingMode") }}</view>
					<view class="" @click="chooseHandle('workingMode')">
						<text class="write-placeholder" v-if="submitForm.workingMode === ''">
							{{ $t('recruit.PleaseChoose') }}
						</text>
						<text class="write-text" v-else>
							{{ submitForm.workingMode == 0 ? $t('recruit.OnSite') : $t('recruit.OnLine') }}
						</text>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>


				<view class="write-detail">
					<view class="title">{{ $t("recruit.Workexperience") }}</view>
					<view class="" @click="chooseHandle('workExperience')">
						<text class="write-placeholder" v-if="submitForm.workExperience === ''">
							{{ $t('recruit.PleaseChoose') }}
						</text>
						<text class="write-text" v-else>
							{{ submitForm.workExperience == 0 ? $t('recruit.Lessthan1year') : submitForm.workExperience == 1
								? $t('recruit.1-3Years') : submitForm.workExperience == 2 ? $t('recruit.3-5Years') :
									$t('recruit.moreThan5Years') }}
						</text>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>
				<view class="write-detail">
					<view class="title">{{ $t("recruit.Salary") }}</view>
					<view class="" @click="chooseHandle('salary')">
						<text class="write-placeholder" v-if="submitForm.salary === ''">
							{{ $t('recruit.PleaseChoose') }}
						</text>
						<text class="write-text" v-else>
							{{ submitForm.salary == -1 ? $t('feeServices.Negotiable') : $t('feeServices.specificAmount') }}
						</text>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>

				</view>
				<view class="write-detail" v-if="submitForm.salary == null">
					<view class="title"></view>
					<input type="digit" class="right-input sub-input" placeholder-class="write-placeholder"
						v-model="submitForm.salaryMoney" :placeholder="$t('feeServices.PleaseEnter')">
					</input>{{ currencyObj.currency }}
				</view>

				<view class="write-detail">
					<view class="title">{{ $t("recruit.RecruitingNumbers") }}</view>
					<input class="right-input " placeholder-class="write-placeholder" v-model="submitForm.recruitingNumbers"
						:placeholder="$t('recruit.PleaseEnter')" type="number" />
				</view>
			</view>

			<view class="write-view">
				<view class="write-detail">
					<view class="title">
						<view class="">
							{{ $t("feeServices.allowReferrals") }}
						</view>
						<view class="sub-title">
							{{ $t("feeServices.allowReferralsTip") }}
						</view>
					</view>
					<view class="">
						<u-switch v-model="submitForm.allowReferrals" :activeValue="1" :inactiveValue="0"
							activeColor="#61BDB2" inactiveColor="rgb(230, 230, 230)"></u-switch>
					</view>
				</view>

				<view class="write-detail" v-if="submitForm.allowReferrals == 1">
					<view class="title">{{ $t("feeServices.ReferralReward") }}</view>
					<view class="" @click="chooseHandle('referralReward')">
						<text class="write-placeholder" v-if="submitForm.allowReferralsType === ''">
							{{ $t('recruit.PleaseChoose') }}
						</text>
						<text class="write-text" v-else>
							{{ submitForm.allowReferralsType == -1 ? $t('feeServices.Negotiable')
								: $t('feeServices.specificAmount') }}
						</text>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>

				<view class="write-detail" v-if="submitForm.allowReferralsType == null && submitForm.allowReferrals == 1">
					<view class="title"></view>
					<input type="digit" class="right-input sub-input" placeholder-class="write-placeholder"
						v-model="submitForm.allowReferralsMoney" :placeholder="$t('feeServices.PleaseEnter')">
					</input>{{ currencyObj.currency }}
				</view>
			</view>

			<view class="write-view">
				<view class="write-detail">
					<view class="title">{{ $t("recruit.CompanyName") }}</view>
					<input class="right-input" placeholder-class="write-placeholder" v-model="submitForm.companyName"
						:placeholder="$t('feeServices.PleaseEnter')" />
				</view>
				<view class="write-detail">
					<view class="title">{{ $t("recruit.CompanyAddress") }}</view>
					<view class="flex-box">
						<regionSelect ref="regionSelect" :cityValue.sync="companyAddress"
							@totalValue="getToatlCompanyAddress" :isEditor="!!submitForm.id"></regionSelect>
						<!-- 		<text class="write-placeholder ">
					{{$t('feeServices.PleaseChoose')}}
				</text> -->
						<view style="width: 24rpx;">

						</view>
						<i class="iconfont icon-jiantou-you you"></i>
					</view>
				</view>
				<view class="write-detail-input">
					<view class="title">{{ $t("recruit.DetailedAddress") }}</view>
					<view class="h30"></view>
					<input placeholder-class="write-placeholder-input" v-model="submitForm.companyDetailedAddress"
						:placeholder="$t('recruit.PleaseEnter')" />
				</view>
				<view class="write-detail-input">
					<view class="title">{{ $t("recruit.BusinessLicenseRegistrationNumber") }}</view>
					<view class="h30"></view>
					<input placeholder-class="write-placeholder-input"
						v-model="submitForm.businessLicenseRegistrationNumber" :placeholder="$t('recruit.PleaseEnter')" />
				</view>
				<view class="write-detail">
					<view class="title">{{ $t("recruit.DutyParagraph") }}</view>
					<input class="right-input" placeholder-class="write-placeholder" v-model="submitForm.dutyParagraph"
						:placeholder="$t('feeServices.PleaseEnter')" />
				</view>
				<view class="write-detail-input">
					<view class="title">{{ $t("recruit.CompanyContactInformation") }}</view>
					<view class="h30"></view>
					<input placeholder-class="write-placeholder-input" v-model="submitForm.companyContactInformation"
						:placeholder="$t('recruit.CompanyContactInformationTip')" />
				</view>
				<view class="write-detail">
					<view class="title">{{ $t("recruit.CompanyContact") }}</view>
					<input class="right-input" placeholder-class="write-placeholder" v-model="submitForm.companyContact"
						:placeholder="$t('feeServices.PleaseEnter')" />
				</view>
				<view class="write-detail-input">
					<view class="title"> {{ $t("recruit.ThecontactsPhoneNumber") }}</view>
					<view class="h30"></view>
					<input placeholder-class="write-placeholder-input" @blur="handleBlur" v-model="submitForm.phoneNumber"
						:placeholder="$t('recruit.PleaseEnter')" />
				</view>
			</view>

			<view class="bottom-tips">
				<view class="">
					{{ $t('recruit.tip1') }} <text class="money">{{ currencyObj.symbol }}{{ bondObj.bond }}</text>
					{{ $t('recruit.tip2') }}
				</view>
				<view class="">
					{{ $t("recruit.tip3") }}
				</view>
			</view>



		</view>

		<view class="bottom-btn">
			<view class="btn" :class="{ 'active-btn': isCanPost() }" @click="onPostJob">
				{{ submitForm.id ? $t("index.shelf") : $t("post") }}
			</view>
		</view>

		<SelectPopup :show.sync="selectValue.show" :option="selectValue.list" :title="selectValue.title"
			:value="selectValue.value" @finish="onSelectHandle" v-if="selectValue.show"
			:labelSigned="selectValue.labelSigned" :valueSigned="selectValue.valueSigned"></SelectPopup>


	</view>
</template>

<script>
import SelectPopup from "@/components/SelectPopup.vue";

import checkPhoneByCountry from "@/utils/checkPhoneByCountry.js"
import regionSelect from "../friendsInformation/components/regionSelect.vue";

import {
	queryLabelList,
	recruitmentList,
	recruitment,
	recruitmentDetail,
	editRecruitment,
	queryRecruitBond
} from '@/services/recruit.js'

import { queryCountryCurrency } from '@/services/feeServices.js'


export default {
	components: {
		SelectPopup,
		regionSelect,
	},
	data() {
		return {
			title: "",
			value: 0,
			remuneration: "",
			labelList: [],
			selectValue: {
				type: '',
				title: '',
				show: false,
				value: '',
				labelSigned: '',
				valueSigned: '',
				list: []
			},
			SelectPopupShow: false,
			selectType: '',
			selectTitle: '',
			companyAddress: [],
			workPlace: [],
			submitForm: {
				labelId: "",
				position: "",
				requirements: "",
				workPlace: "",
				detailedAddress: "",
				jobNature: "",
				workingMode: "",
				salary: "",
				salaryMoney: "",
				workExperience: "",
				recruitingNumbers: 1,
				allowReferrals: 0,
				allowReferralsType: '',
				allowReferralsMoney: "",
				companyName: "",
				companyAddress: "",
				companyDetailedAddress: "",
				businessLicenseRegistrationNumber: "",
				dutyParagraph: "",
				companyContactInformation: "",
				companyContact: "",
				phoneNumber: "",
				isPosting: false,
			},
			language: '',
			currencyObj: {},
			bondObj: {}
		};
	},
	onLoad(option) {
		this.language = uni.getLocale();
		this._queryLabelList()
		this.getCurrency()
		if (option.id) {
			this._recruitmentDetail(option.id)
		} else {
			this.$nextTick(() => {
				this.$refs.regionSelect.init([]);
			});
			this.$nextTick(() => {
				this.$refs.regionSelectWorkplace.init([]);
			});
		}


	},
	computed: {
		JobNatureList() {
			return [{
				showLabel: this.$t('recruit.Fulltime'),
				id: 0
			},
			{
				showLabel: this.$t('recruit.Part-time'),
				id: 1
			}
			]
		},
		workingModeList() {
			return [{
				showLabel: this.$t('recruit.OnSite'),
				id: 0
			},
			{
				showLabel: this.$t('recruit.OnLine'),
				id: 1
			}
			]
		},
		workExperienceList() {
			return [{
				showLabel: this.$t('recruit.Lessthan1year'),
				id: 0
			},
			{
				showLabel: this.$t('recruit.1-3Years'),
				id: 1
			},
			{
				showLabel: this.$t('recruit.3-5Years'),
				id: 2
			},
			{
				showLabel: this.$t('recruit.moreThan5Years'),
				id: 3
			}
			]
		},
		salaryList() {
			return [{
				showLabel: this.$t('feeServices.Negotiable'),
				id: -1
			},
			{
				showLabel: this.$t('feeServices.specificAmount'),
				id: null
			}
			]
		},
	},
	methods: {
		async getCurrency() {
			const {
				success,
				result
			} = await queryCountryCurrency()
			if (success) {
				this.currencyObj = result.data
				this.submitForm.currencyId = this.currencyObj.id
				this.getBond()
			}
		},
		handleBlur() {
			if (!checkPhoneByCountry(this.submitForm.phoneNumber, 'ru-RU')) {
				uni.showToast({
					title: this.$t('recruit.ThecontactsPhoneNumber-error'),
					duration: 2000,
					icon:'none'
				});
				this.submitForm.phoneNumber = ''
			}
		},
		async getBond() {
			const {
				success,
				result
			} = await queryRecruitBond({
				currencyId: this.currencyObj.id
			})
			if (success) {
				this.bondObj = result.data
			}
		},
		/** 
		 * 获取招聘详细信息，初始化表单
		 * @param {Number} id 招聘详情id
		 */
		async _recruitmentDetail(id) {
			uni.showLoading()
			const {
				success,
				result
			} = await recruitmentDetail(id)
			uni.hideLoading()
			if (success) {

				this.submitForm = result.data

				this.workPlace = this.submitForm.workPlace ? this.getRegionNameList(JSON.parse(this.submitForm
					.workPlace)) : []

				this.companyAddress = this.submitForm.companyAddress ? this.getRegionNameList(JSON.parse(this
					.submitForm.companyAddress)) : []
				// console.log('详情', this.submitForm.companyAddress)
				this.$refs.regionSelect.init(this.companyAddress);
				this.$refs.regionSelectWorkplace.init(this.workPlace);
				console.log(this.submitForm, 111);
			}
		},
		// async getMainDetail() {
		//   const { code, data } = await queryRewardDetail(this.id)
		//   if (code === 200) {
		//     this.formData = data
		//     this.formData.workPlace = data.workPlace ? JSON.parse(data.workPlace) : null
		//     this.cityValue = this.formData.workPlace ? this.getRegionNameList(this.formData.workPlace) : []
		//     this.$nextTick(() => {
		//       this.$refs.regionSelect.init(this.cityValue);
		//     });
		//     if (Number(data.referralsMoney) === -1) {
		//       this.referralsMoney = -1
		//     } else {
		//       this.referralsMoney = 1
		//     }
		//   }
		// },
		// 获取地区的详细地址
		getToatlWorkplace(value) {
			console.log(JSON.stringify(value), '获取地区的详细地址')
			this.submitForm.workPlace = JSON.stringify(value)
		},
		// 获取公司的详细地址
		getToatlCompanyAddress(value) {
			console.log(JSON.stringify(value), '获取公司的详细地址')
			this.submitForm.companyAddress = JSON.stringify(value)
		},
		/**
		 * @param {Number} categoryId 货币id
		 */
		getCategoryName(categoryId) {
			const categoryIndex = this.labelList.findIndex(
				(value) => String(value.id) === String(categoryId)
			)
			return categoryIndex !== -1 ? this.labelList[categoryIndex].showLabel : ''
		},
		async getCurrentPostCity(e) {
			this.submitForm.countryIosCode = e
		},
		/**
		 * 获取招聘标签列表
		 */
		async _queryLabelList() {
			const {
				success,
				result
			} = await queryLabelList({
				status: 1,
				isAsc: 'desc'
			})

			if (success) {
				const lang = uni.getLocale()
				result.rows.forEach((item) => {
					item.label = JSON.parse(item.label)
					if (lang == 'zh-Hans') {
						item.showLabel = item.label.cn
					} else if (lang == 'en') {
						item.showLabel = item.label.en
					} else {
						item.showLabel = item.label.ru
					}
				})
				this.labelList = result.rows
				console.log('标签列表', this.labelList);
			}

		},
		change() { },
		/**
		 * @param {String} val 选择框类别
		 */
		chooseHandle(val) {
			this.selectValue.type = val
			this.selectValue.labelSigned = "showLabel"
			this.selectValue.valueSigned = "id"
			switch (val) {
				case 'category':
					this.selectValue.title = this.$t("feeServices.category")
					this.selectValue.list = this.labelList
					this.selectValue.value = this.submitForm.labelId
					break;
				case 'jobNature':
					this.selectValue.title = this.$t("recruit.JobNature")
					this.selectValue.list = this.JobNatureList
					this.selectValue.value = this.submitForm.jobNature
					break;
				case 'workingMode':
					this.selectValue.title = this.$t("recruit.WorkingMode")
					this.selectValue.list = this.workingModeList
					this.selectValue.value = this.submitForm.workingMode
					break;
				case 'workExperience':
					this.selectValue.title = this.$t("recruit.Workexperience")
					this.selectValue.list = this.workExperienceList
					this.selectValue.value = this.submitForm.workExperience
					break;
				case 'salary':
					this.selectValue.title = this.$t("recruit.Salary")
					this.selectValue.list = this.salaryList
					this.selectValue.value = this.submitForm.salary
					break;
				case 'referralReward':
					this.selectValue.title = this.$t("feeServices.ReferralReward")
					this.selectValue.list = this.salaryList
					this.selectValue.value = this.submitForm.allowReferralsType
					break;
				default:
					break;
			}
			this.selectValue.show = true
		},
		/**
		 * 选择框选中完成之后的回调
		 */
		onSelectHandle(val) {
			switch (this.selectValue.type) {
				case 'category':
					this.submitForm.labelId = val
					break;
				case 'jobNature':
					this.submitForm.jobNature = val
					break;
				case 'workingMode':
					this.submitForm.workingMode = val
					break;
				case 'workExperience':
					this.submitForm.workExperience = val
					break;
				case 'salary':
					this.submitForm.salary = val
					break;
				case 'referralReward':
					this.submitForm.allowReferralsType = val
					break;
				default:
					break;
			}

			console.log('选择后回调', val);
		},
		/**
		 * 发布招聘信息
		 */
		async onPostJob() {
			if (!this.isCanPost() || this.isPosting) {
				uni.showToast({
					title: '请填写完整信息',
					duration: 2000,
					icon: 'none'
				});
				return
			}
			uni.showLoading()
			this.isPosting = true
			// 有id即为编辑
			if (this.submitForm.id) {
				let data = {
					...this.submitForm
				}
				data.status = 1
				const {
					success
				} = await editRecruitment(data)
				uni.hideLoading()
				this.isPosting = false
				if (success) {
					// uni.navigateBack()
					uni.redirectTo({
						url: '/pagesUser/jobs/myPosted'
					});
				}
			} else {
				const {
					success
				} = await recruitment(this.submitForm)
				uni.hideLoading()
				this.isPosting = false
				if (success) {
					// uni.navigateBack()
					uni.redirectTo({
						url: '/pagesDiscover/recruitment/Recruitment'
					});
				}
			}

		},
		// 判断是否能够发布招聘信息
		isCanPost() {
			const obj = this.submitForm
			for (let key in obj) {
				if ((key == 'salaryMoney' && obj.salary == "-1") || (key ==
					'allowReferralsType' && obj.allowReferrals == 0) || (key == 'allowReferralsMoney' && obj
						.allowReferralsType !== null)) {
					continue
				}
				if (obj[key] === '') {
					return false
				}
			}

			return true
		},
	},
};
</script>

<style lang="scss" scoped>
.you {
	color: #A6A6A6;
}

.h30 {
	height: 30rpx;
}

.right-input {
	text-align: right;
}

.flex-box {
	display: flex;
	align-items: center;
}

.money {
	font-size: 30upx;
	font-weight: 500;
	color: #fe6600;
	// padding: 0 10rpx;
}

.sub-input {
	margin-left: auto;
	margin-right: 24rpx;
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #FE6600;
}

.released-view {
	padding: 30upx;

	.category-view {
		padding: 35upx 30upx;
		background: #ffffff;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.title {
		font-size: 30upx;
		font-weight: 400;
		color: #000000;
		white-space: nowrap;
	}

	.sub-title {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #878787;
		margin-top: 20rpx;
	}

	.Paid-view {
		margin-top: 30upx;
		padding: 30upx;
		background: #ffffff;
		border-radius: 20upx;
	}

	.write-view {
		padding: 0upx 30upx;
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 30upx;

		.write-detail {
			padding: 40upx 0upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #f6f6f6;
		}

		.write-detail-input {
			padding: 40upx 0upx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-bottom: 2upx solid #f6f6f6;
		}

		.write-placeholder {
			text-align: right;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			opacity: 0.3;
			margin-right: 24rpx;
		}

		.write-text {
			text-align: right;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin-right: 24rpx;
		}

		.write-placeholder-input {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			opacity: 0.3;
			margin-right: 24rpx;

		}

	}

	.switch-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 70upx;

		.switch-left {
			display: flex;
			align-items: center;
		}

		.money {
			font-size: 30upx;
			font-weight: 500;
			color: #fe6600;
			margin-left: 40upx;
		}
	}

	.bottom-tips {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #878787;
		line-height: 40rpx;
		margin-top: 30rpx;
	}
}

.bottom-btn {
	width: 750rpx;
	background-color: #ffffff;
	margin-top: 30upx;
	padding: 17rpx 0;

	.btn {
		font-size: 30upx;
		font-weight: 500;
		color: #878787;
		width: 690rpx;
		height: 90upx;
		background: #e1e1e1;
		border-radius: 20upx;
		text-align: center;
		line-height: 90upx;
		margin: 0 auto;
	}

	.active-btn {
		background: #61BDB2;
		color: #FFFFFF;
	}
}

/deep/.u-textarea__count {
	background: #f6f6f6;
}
</style>